<template>
	<view class="page-content">
			<u-tabs 
				:list="tabs" 
				:activeStyle="{color:'#3f2a17',fontSize:'28rpx'}"
				:inactiveStyle="{fontSize:'26rpx'}"
				lineColor="#f2bc35"
				:current="onCurrent"
				:scrollable="false"
				@change="tabChange">
			</u-tabs>
		<view class="work-list">
			<m-loading :show="listLoad" :emptyShow="list.data.length <= 0"></m-loading>
			<view class="work-list_list" v-if="!listLoad">
				<view class="list-item conter flex-between" v-for="(item,index) in list.data" :key="index" @click="$util.go('workorder/workorder_detail?id='+item.id)">
					<view class="flex-start" style="align-items: flex-start;">
						<view class="list-item__icon shensu flex-center m-r-sm" v-if="item.type == 1">
							<i-icon name="hammer-line" size="40rpx"></i-icon>
						</view>
						<view class="list-item__icon jubao flex-center m-r-sm" v-if="item.type == 2">
							<i-icon name="alarm-warning-line" size="40rpx"></i-icon>
						</view>
						<view class="list-item__icon fankui flex-center m-r-sm" v-if="item.type == 3">
							<i-icon name="lightbulb-line" size="40rpx"></i-icon>
						</view>
						<view class="list-item_info">
							<view class="list-item__title u-line-1">
								<!-- <text class="text-danger">[{{ item.type_text }}]</text> -->
								<text>{{ item.title }}</text>
							</view>
							<view class="list-item__time">
								<text class="font">{{ item.create_time }}</text>
							</view>
						</view>
					</view>
					<view class="list-item_state loading-state" :class="{'orange' : item.state == 2 , 'green' : item.state == 3}">
						<text>{{ item.state_text }}</text>
					</view>
				</view>
			</view>
			<uni-load-more :status="status" :content-text="contentText" v-if="showLoading"></uni-load-more>
		</view>
		<u-action-sheet :actions="pullUpList" @select="$util.go('workorder/workorder_add?type=3',{'login':true})" cancelText="取消" @close="pullUpShow = false" :show="pullUpShow"></u-action-sheet>
		<!-- 侧边小工具 -->
		<side-tools :scrollTop="scrollTop"></side-tools>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				scrollTop:0,
				pullUpShow:false,
				pullUpList: [{
					name:this.$t('workorder.add')
				}],
				onCurrent:0,
				showLoading:false,
				status:"loading",
				listLoad:true,
				listEmptyShow:false,
			}
		},
		
		computed: mapState({
			userInfo: state => state.user.userInfo,
			configInfo: state => state.config.configInfo,
			tabs: state => state.workOrder.tabs,
			list: state => state.workOrder.list,
			param: state => state.workOrder.param,
			contentText: state => state.content.contentText,
		}),
		
		onLoad(option){
		},
		onReady(){
			if(this.$wechat.isWechat()) this.$util.navTitle()
		},
		onShow(){
			this.getList();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		/* 页面隐藏 */
		onHide(){
			// 关闭加载
			uni.stopPullDownRefresh();
		},
		
		async onPullDownRefresh(){
			await this.getList();
			this.$util.showToast(this.$t('app.renovate.success'),function(){
				uni.stopPullDownRefresh();
			});
		},
		
		async onReachBottom(){
			if (this.list.current_page >= this.list.last_page || this.ListLoad){
				this.status="nomore";
				return
			};
			this.status = "loading";
			this.showLoading = true;
			this.getList(this.param.page + 1);
		},
		
		onNavigationBarButtonTap(){
			this.pullUpShow = true
		},
		
		methods: {
			...mapActions(['getWorkOrderList']),
			...mapMutations(['updateWorKOrderState']),
			
			// 获取反馈列表
			async getList(page = 0){
				// console.log(this.list)
				if (page) {
					let param = uni.$u.deepClone(this.param)
					param.page = page
					this.updateWorKOrderState({
						key: 'param',
						val: param
					})
				}
				this.getWorkOrderList(this.param)
				this.listLoad = false
			},
			
			 tabChange(index){
				this.listLoad = true;
				this.showLoading = false;
				let param = uni.$u.deepClone(this.param)
				param.state = index.state
				this.updateWorKOrderState({
					key: 'param',
					val: param
				})
				uni.pageScrollTo({
					scrollTop: 0
				})
				this.getList(1);
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color:var(--theme-page-bg);
	}
	.page-content{
		height: 100%;
		position:relative;
	}
	.u-tabs{
		background-color: #fff;
	}
	.list-item{
		padding: 10px 30rpx;
		background-color: #fff;
		flex-wrap: nowrap;
		overflow: hidden;
		&__icon{
			// position: relative;
			position: absolute;
			width: 80rpx;
			height: 80rpx;
			border-radius: 100%;
			text-align: center;
			background-color: #f3f3f3;
			font-size: 15rpx;
			left: -20rpx;
			top: -20rpx;
			opacity: .2;
			z-index: 1;
		}
		&__icon.jubao{
			background: #f56c6c;
			// background: linear-gradient(120deg,#f56c6c,#f56c6c80);
			// -webkit-box-shadow: 0 5px 10px 0 rgba(38,210,2举报兼职[奶茶店招聘]55,.3);
			box-shadow: 0 5px 10px 0 #f56c6c10;
		}
		&__icon.shensu{
			background: #5b98fb;
			box-shadow: 0 5px 10px 0 #5b98fb10;
		}
		&__icon.fankui{
			background: #2aae67;
			box-shadow: 0 5px 10px 0 #2aae6710;
		}
		
		&__icon .i-icon{
			color:#fff!important;
		}
		&_info{
			max-width: 400rpx;
			flex: 1;
			z-index: 2;
			// width: 65%;
		}
		&__time{
			margin-top: 5px;
		}
		&_state{
			.text{
				position: relative;
			}
		}
	}
</style>
